<template>
  <div class="database_wrap">
    <div class="database">
      <topHeader @clearData="clearAllData" />
      <div class="router_view">
        <router-view ref="dynamicRouter" />
      </div>
      <el-dialog
        v-zsdialogDrag
        :closeOnClickModal="false"
        class="bin_dialog dialog-1000"
        title="修改密码"
        :visible.sync="userDialogShow"
        :before-close="handleCloseUser"
        width="1000px"
      >
        <setting-user-dialog
          @cancel="userDialogShow = false"
        ></setting-user-dialog>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import topHeader from "./components/topHeader.vue";
import settingUserDialog from "@/components/settingUserDialog";
export default {
  name: "databasePage",
  components: { topHeader, settingUserDialog },
  data() {
    return {};
  },
  computed: {
    userDialogShow: function () {
      // return false
      return this.$store.state.setUserDialogShow;
    },
  },
  methods: {
    clearAllData() {
      if (this.$refs.dynamicRouter.clearAllData) {
        this.$refs.dynamicRouter.clearAllData();
      }
    },
    handleCloseUser() {
      this.$store.dispatch("setUserDialogShow", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.database_wrap {
  width: 100%;
  height: 100%;

  .database {
    width: 100%;
    height: 100%;
    background: url("../../assets/big_bg.png") center center no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 85px;
    position: relative;

    .top_header_wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    .router_view {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 18px;
    }
  }
}
</style>
